<template>
  <div class="container_hori content">
    <div class="left">
      <Box :show-header="false" class="left_table">
        <SortTable :columns="table.header" :data="table.data" :row-click="false" />
      </Box>
    </div>
    <div class="right container_vert_divide3">
      <Box title="车辆类型统计">
        <PieChart :data="carTypeStats.data" :serie-name="carTypeStats.name"/>
      </Box>
      <Box title="整体时延分布">
        <LineChart :x-axis="wholeStats.xAxis" :data="wholeStats.data" :serie-name="wholeStats.name" />
      </Box>
      <Box title="协同感知时延分布">
        <LineChart :x-axis="perceptionStats.xAxis" :data="perceptionStats.data" :serie-name="perceptionStats.name" />
      </Box>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import Box from '@/components/Box.vue';
import LineChart from '@/components/LineChart.vue';
import PieChart from '@/components/PieChart.vue';
import SortTable from '@/components/SortTable.vue';
import { getYesterdayDateStr } from '@/utils/util';
import { history, carType, whole, perception } from '@/api/delay';
//事件总线
const EventBus = inject('EventBus');
//默认请求日期昨日
const yesterdayStr = getYesterdayDateStr();
//请求时间参数
const queryTime = ref({
  startTime: yesterdayStr + ' 00:00:00',
  endTime: yesterdayStr + ' 23:59:59'
});
//监听请求时间变化
EventBus.on('timequery', ({ startTime, endTime }) => {
  queryTime.value.startTime = startTime;
  queryTime.value.endTime = endTime;
  getTableData();
  getChartData();
});
//历史详情表格
const table = ref({
  data: [],
  header: [
    {
      title: '时间',
      dataIndex: 'createTime'
    },
    {
      title: '车辆ID',
      dataIndex: 'carId',
      align: 'center'
    },
    {
      title: '车辆类型',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '整体时延',
      dataIndex: 'delay',
      align: 'center'
    },
    {
      title: '协同感知时延',
      dataIndex: 'perceptionDelay',
      align: 'center'
    }
  ]
});

const carTypeStats = ref({
  data: [],
  name: '决策区域分布'
});

const wholeStats = ref({
  data: [],
  xAxis: [],
  name: '整体时延分布'
});

const perceptionStats = ref({
  data: [],
  xAxis: [],
  name: '协同感知时延分布'
});
/**获取表格数据 */
const getTableData = () => {
  history(queryTime.value).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      table.value.data = data;
    }
  });
};
/** 获取图表数据 */
const getChartData = () => {
  const reqestData = queryTime.value;
  carType(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      carTypeStats.value.data = data.map(({ type, value }) => {
        return {
          name: type,
          value
        };
      });
    }
  });
  whole().then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      wholeStats.value.xAxis = data.map(item => { return item.delay + ''; });
      wholeStats.value.data = data.map(item => item.value);
    }
  });
  perception().then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      perceptionStats.value.xAxis = data.map(item => { return item.delay + ''; });
      perceptionStats.value.data = data.map(item => item.value);
    }
  });
};

getTableData();
getChartData();
</script>
<style lang="less" scoped>
.left {
  width: 75.7%;
  height: 100%;
}
.left > div {
  width: 100%;
  height: 100%;
}

.left_table {
  padding: 1.25rem 1.75rem;
}

.right {
  width: 24.5%;
  height: 100%;
}
</style>
